<!DOCTYPE html>
<html class="x-admin-sm">

	<head>
		<meta charset="UTF-8">
		<title>推荐课程</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
		<link rel="stylesheet" href="./css/font.css">
		<link rel="stylesheet" href="./css/xadmin.css">
		<script src="./lib/layui/layui.js" charset="utf-8"></script>
		<script type="text/javascript" src="./js/xadmin.js"></script>
	</head>

	<body>
		<div class="x-nav">
			<span class="layui-breadcrumb">
            <a href="">首页</a>
            <a href="">演示</a>
            <a>
              <cite>导航元素</cite></a>
          </span>
			<a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
				<i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
		</div>
		<div class="layui-fluid">
			<div class="layui-row layui-col-space15">
				<div class="layui-col-md12">
					<div class="layui-card" id="app">
						<div class="layui-card-body ">
							<form class="layui-form layui-col-space5">

								<div class="layui-inline layui-show-xs-block">
									<input type="text" name="courseName" id="courseName" placeholder="课程名称" autocomplete="off" class="layui-input">
								</div>
								<div class="layui-inline layui-show-xs-block">
									<button class="layui-btn" @click="sel()" type="button" lay-filter="sreach">
										<i class="layui-icon">&#xe615;</i>
									</button>
								</div>
								<div class="layui-inline layui-show-xs-block">
									<button class="layui-btn" @click="empty()" type="button" lay-filter="sreach">
										<i class="layui-icon">清空</i>
									</button>
								</div>
								<div class="layui-inline layui-show-xs-block">
									<button class="layui-btn" @click="AddCourse()" type="button" lay-filter="sreach">
                                    	<i class="layui-icon">
                                    	</i>添加
                                    </button>
								</div>
							</form>
						</div>
						<div class="layui-card-body ">
							<table class="layui-table layui-form">
								<thead>
									<tr>
										<th>ID</th>
										<th>课程名称</th>
										<th>课程简介</th>
										<th>排序值</th>
										<th>课程状态</th>
										<th>操作</th>
								</thead>
								<tbody>
									<tr v-for="cour in courseDetail">
										<td>{{ cour.courseId }}</td>
										<td>{{ cour.courseName }}</td>
										<td>{{ cour.title }}</td>
										<td>{{ cour.tid }}</td>
										<td v-if="cour.isAvaliable==1">上架</td>
										<td v-if="cour.isAvaliable==2">下架</td>
										<td class="td-manage">
											<a title="编辑" @click="editSort(cour.courseId)" href="javascript:;">
												<i class="layui-icon">&#xe642;</i>
											</a>
											<a title="删除" @click="delWebId(cour.courseId)" href="javascript:;">
												<i class="layui-icon">&#xe640;</i>
											</a>
										</td>
									</tr>
								</tbody>
							</table>
							<span id="sp"></span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="./js/jquery.min.js"></script>
	<script type="text/javascript" src="js/vue.js"></script>
	<script src="./js/vue.min.js"></script>
	<script type="text/javascript" src="js/jquery.cookie.js"></script>
	<script src="js/axios.min.js"></script>
	<script>
		
		const app = new Vue({
			el: "#app",
			data: {
				courseDetail: []
			},
			methods:{
				loading(){
					axios.defaults.headers.common["token2"] = $.cookie("token2");
					let _this = this;
					axios.get("http://localhost:9095/admin/courseDetail/AllDetail").then(function(response) {
						console.log(response.data.data);
						if (response.data.data==null){
							var html = "<font color='red' size='4'>当前推荐课程无数据</font>";
							$("#sp").append(html);
						}
						_this.courseDetail = response.data.data;
					});
				},
				AddCourse(){
					xadmin.open("添加推荐课程", 'choose_course.html');
				},
				sel(){	//条件查询
					let _this = this;
					var name = $("#courseName").val();
					$.ajax({
						type:"get",
						url:"http://localhost:9095/admin/courseDetail/AllDetail",
						async:true,
						data:{
							"courseName": name
						},
						headers: {
							"token2": $.cookie("token2")
						},
						success:function(msg){
							console.log(msg);
							if (msg.code == 200){
								_this.courseDetail = msg.data;
							} else {
								//提示信息
								layer.alert(msg.message, {
									icon: 5,
									title: '提示'
								});
							}
						}
					});
				},
				empty(){	//清空输入框
					$("#courseName").val("");
				},
				editSort(obj){//	修改数据
					$.cookie("webId", obj);
					xadmin.open("修改数据", 'edit_website.html', 500,400);
				},
				delWebId(obj){
					layer.confirm('确认要删除吗？', function(index) {
						$.ajax({
							type:"post",
							url:"http://localhost:9095/admin/courseDetail/delDetail",
							async:true,
							data:{
								"courseId": obj
							},
							headers: {
								"token2": $.cookie("token2")
							},
							success:function(msg){
								console.log(msg);
								if (msg.code == 200){
									layer.msg('已删除!', {
										icon: 1,
										time: 1000
									});
									window.location.reload();
								} else {
									//提示信息
									layer.alert(msg.message, {
									icon: 5,
										title: '提示'
									});
								}
							}
						});
					});
				}
			},
			created(){
				this.loading();
			}
		})
		
		
		layui.use(['laydate', 'form'], function() {
			var laydate = layui.laydate;
			var form = layui.form;
		});

	</script>
	
	<script>
		var _hmt = _hmt || [];
		(function() {
			var hm = document.createElement("script");
			hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
			var s = document.getElementsByTagName("script")[0];
			s.parentNode.insertBefore(hm, s);
		})();
	</script>

</html>